<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="getFindUsersinformationDto.query" clearable @clear="getUserList">
            <el-button slot="append" icon="el-icon-search" v-on:click="getUserList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" v-on:click="addDialogVisble=true">添加</el-button>
        </el-col>
      </el-row>

    <el-table :data="userlist" border stripe>
      <el-table-column type="index"></el-table-column>
      <el-table-column label="用户Id" prop="userId"></el-table-column>
      <el-table-column label="用户名" prop="userName"></el-table-column>
      <el-table-column label="电话" prop="number"></el-table-column>
      <el-table-column label="权限" prop="permission"></el-table-column>
      <el-table-column label="注册时间" prop="createTime"></el-table-column>
      <el-table-column label="操作" width="150px">
        <template v-slot="scope">
          <el-tooltip effect="dark" content="修改" placement="top" :enterable="false">
          <el-button type="primary" icon="el-icon-edit" size="mini" v-on:click="showEditDialog(scope.row.userId)"></el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
          <el-button type="danger" icon="el-icon-delete" size="mini" v-on:click="removeUserById(scope.row.userId)"></el-button>
          </el-tooltip>

        </template>
      </el-table-column>
    </el-table>

     <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="getFindUsersinformationDto.Pagenum"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="getFindUsersinformationDto.Pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
    </el-card>

  <el-dialog
    title="添加用户"
    :visible.sync="addDialogVisble"
    width="50%"
    @close="addDialogClosed"
    >
    <span>
      <el-form :model="addFrom" :rules="addFromRules" ref="addFromRef" label-width="70px" >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addFrom.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addFrom.password"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="number">
          <el-input v-model="addFrom.number"></el-input>
        </el-form-item>
        </el-form>
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="addDialogVisble = false">取 消</el-button>
      <el-button type="primary" v-on:click="addUser">确 定</el-button>
    </span>
  </el-dialog>

  <el-dialog
    title="修改用户"
    :visible.sync="editDialogVisible"
    width="50%"
    @close="editDialogClosed"
    >
    <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
      <el-form-item label="账号">
        <el-input v-model="editForm.userName" disabled></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="editForm.password"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="number">
        <el-input v-model="editForm.number"></el-input>
      </el-form-item>
      </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="editDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="editUserInfo">确 定</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    data(){
      var checkNumber=(rule,value,callback)=>{
         if(isNaN(value)){
         return callback(new Error('手机号必须为数字'));
         }else{
           return callback();
         }
      };
      return {
        getFindUsersinformationDto:{
          query:'',
          Pagenum:1,
          Pagesize:2
        },
        userlist:[],
        total:0,
        addDialogVisble:false,
        addFrom:{
          username:'',
          password:'',
          number:''
        },
        addFromRules:{
          username:[
            {required:true,message:'请输入账号',trigger:'blur'},
            {min:5,max:20,message:'用户名在5到20个字符之间',trigger:'blur'}
          ],
          password:[
            {required:true,message:'密码不能为空',trigger:'blur'},
            {min:6,max:20,message:'密码在6到20个字符之间',trigger:'blur'}
          ],
          number:[
            {required:true,message:'手机号不能为空',trigger:'blur'},
            {min:11,max:11,message:'手机号码必须为11位',trigger:'blur'},
            {validator:checkNumber,trigger:'blur'}
          ]
        },
        editDialogVisible:false,
        editForm:{},
        editFormRules:{
          password:[
            {required:true,message:'密码不能为空',trigger:'blur'},
            {min:6,max:20,message:'密码在6到20个字符之间',trigger:'blur'}
          ],
          number:[
            {required:true,message:'手机号不能为空',trigger:'blur'},
            {min:11,max:11,message:'手机号码必须为11位',trigger:'blur'},
            {validator:checkNumber,trigger:'blur'}
          ]
        }
      }
    },

    created(){
      this.getUserList()
    },

    methods:{
     async getUserList(){
      const{data:res}= await this.$http.get('https://localhost:44389/api/Users',{params:this.getFindUsersinformationDto})
      this.userlist=res.data.userForFinduserDtos
      this.total=res.data.totalpage
      },
      handleSizeChange(newSize){
       this.getFindUsersinformationDto.Pagesize=newSize
       this.getUserList()
      },
      handleCurrentChange(newPage){
      this.getFindUsersinformationDto.Pagenum=newPage
      this.getUserList()
      },
      addDialogClosed(){
        this.$refs.addFromRef.resetFields()
      },
      addUser(){
        this.$refs.addFromRef.validate(async valid=>{
          if(!valid){
            return this.$message.error("用户信息错误请输入正确的格式")
          }
       const{data:res} = await this.$http.post("https://localhost:44389/api/UserLogin/register",this.addFrom)
       if(res.status !==201) return this.$message.error(res.message)
        this.$message.success(res.message)
        this.addDialogVisble = false
        this.getUserList()
        })
      },
     async showEditDialog(id){
      const{data:res}= await this.$http.get("https://localhost:44389/api/UserLogin/"+id)
      if(res.status!==200){return this.$message.error(res.message)}
      this.editForm=res.data
      this.editDialogVisible=true
      },
      editDialogClosed(){
        this.$refs.editFormRef.resetFields()
      },
      editUserInfo(){
        this.$refs.editFormRef.validate(async valid=>{
          if(!valid){
            return this.$message.error("用户信息错误请输入正确的格式")
          }

          axios({
            method:'put',
            url:'https://localhost:44389/api/Users/'+this.editForm.userId,
            data:this.editForm,
          }).then(res=>{
            if(res.status!=200){return this.$message.error(res.message)}
            this.editDialogVisible =false
            this.getUserList()
            this.$message.success('修改成功')
          })

        })
      },
     async removeUserById(id){
      const confirmResult = await this.$confirm('此操作将永久删除该用户信息, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).catch(err=>err)
                if(confirmResult!=='confirm'){
                  return this.$message.info('已经取消删除')
                }
              const{data:res} = await this.$http.delete("https://localhost:44389/api/Users/"+id)
              if(res.status!==200){return this.$message.error("删除失败")}
              this.$message.success("删除成功")
              this.getUserList()
      }

    }

  }
</script>

<style lang="less" scoped>
</style>
